<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>必要商城_大牌品质 工厂价格</title>
    <link href="http://static.biyao.com/pc/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="./lib/common.css" rel="stylesheet" type="text/css" />
    <link href="./lib/new.main.css" rel="stylesheet" type="text/css" />
    <link href="./lib/elementUI.css" rel="stylesheet" type="text/css" />
    <link href="./lib/global.css" rel="stylesheet" type="text/css" />
    <link href="./lib/iprHeader.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="./lib/new.category.css" />
  </head>

  <body id="pagebody">
    <div class="header header-index"></div>
    <!-- 导航栏 -->
    <div class="nav nav-index">
      <div class="clearfix">
        <a href="http://www.biyao.com/home/index.html" class="nav-logo"><img src="./lib/logo.png" height="51" /></a>
        <div class="nav-category">
          <p><span>全部分类</span><i></i></p>
          <div>
            <ul class="nav-list">
              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=621"> 咖啡 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=627"> 饮食 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=691"> 正餐 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=279"> 男装 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=294"> 女装 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=35"> 鞋靴 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=122"> 眼镜 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=339"> 内衣配饰 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=39"> 运动 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=119"> 美妆 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=724"> 个护 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=391"> 母婴 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=652"> 生鲜直供 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=51"> 餐厨 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=334"> 电器 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=153"> 箱包 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=223"> 数码办公 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=429"> 汽配 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=355"> 家纺 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=10"> 家具 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=369"> 家装 </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a href="http://www.biyao.com/classify/category.html?categoryId=546"> 健康保健 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=685"> 宠物 </a>

                  <span>/</span>

                  <a href="http://www.biyao.com/classify/category.html?categoryId=816"> 礼品 </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-search">
          <p><input type="text" id="searchInput" placeholder="请输入要搜索的商品" /><span id="searchBtn"></span></p>
          <ul>
            <li>电动牙刷</li>
            <li>男士内裤</li>
            <li>防晒霜</li>
            <li>防晒</li>
            <li>防晒衣女</li>
            <li>眼镜近视女</li>
            <li>洗发水</li>
            <li>面膜</li>
            <li>凉席</li>
            <li>沐浴露</li>
          </ul>
        </div>
        <div class="nav-tab">
          <ul>
            <li><a href="http://www.biyao.com/home/index.html">首页</a></li>
            <li><a href="http://www.biyao.com/classify/newProduct.html">每日上新</a></li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                了解必要
                <div class="hover_code gzh">
                  <span>关注必要微信公众号<br />了解你想了解的一切<br />小必姐在此发福利哦</span>
                </div>
              </div>
            </li>
            <li class="nav-tab-last" id="appDownload">下载必要APP</li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                我的必要
                <div class="hover_code app">
                  <span>
                    扫码下载必要app
                    <br />
                    手机用户独享海量权益
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 分类栏 -->
    <div class="cateBread">
      <span>一级分类：</span>
      <ul id="one">
        <li>示例</li>
      </ul>
    </div>
    <div class="cateBread">
      <span>二级分类：</span>
      <ul id="two">
        <li>休食</li>
      </ul>
    </div>
    <div class="cateBread">
      <span>三级分类：</span>
      <ul id="three">
        <li>零食</li>
      </ul>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    
    <script>
       // 1. 设置基地址
       axios.defaults.baseURL = 'http://123.57.109.30:3999'
       // 2. 待会儿事件委托绑定
       const oneUl = document.querySelector('#one')
       const twoUl = document.querySelector('#two')
       const threeUl = document.querySelector('#three')

       // 3. 获取一级分类的数据，发请求
       ;(async () => {
          // 一级分类
          const {data:{list:oneRes}} = await axios.get('/api/categoryfirst')
          console.log(oneRes)
          const htmlArr = oneRes.map(el => {
            return `
                <li data-id=${el.firstId}>${el.firstName}</li>
            `
          })
          oneUl.innerHTML = htmlArr.join('')

          /* ==================== 二级分类的处理 ===================== */
          oneUl.addEventListener('click', async (e) => {
            if (e.target.tagName !== 'LI') return
            const firstId = e.target.dataset.id
            // 发送请求
            const {data:{list:twoRes}} = await axios({
              url:`/api/categorySecond?firstId=${firstId}`,
            })
            // console.log(twoRes)
            const htmlArr = twoRes.map(el => {
              return `
                  <li data-id=${el.secondId}>${el.secondName}</li>
              `
            })
            twoUl.innerHTML = htmlArr.join('')
            // 等二级分类有了数据，渲染好了之后，点
            document.querySelector('#two li').click()
          }) // end click

          // 自动click一下，一级分类的第一个li标签
          document.querySelector('#one li').click()
          

          /* ==================== 三级分类的获取 ===================== */

          twoUl.addEventListener('click', async (e) => {
              if (e.target.tagName !== 'LI') return
              const secondId = e.target.dataset.id
              // 发送请求
              const {data:{list:threeRes}} = await axios({
                url:`/api/categoryThird?secondId=${secondId}`,
              })
              // console.log(twoRes)
              console.log(threeRes) 
              const htmlArr = threeRes.map(el => {
                return `
                    <li data-id=${el.thiredId}>${el.thiredName}</li>
                `
              })
              threeUl.innerHTML = htmlArr.join('')
          })

       })()
    </script>
  </body>
</html>
